<template>
  <div class="bg">
    <el-divider></el-divider>
    <el-row>
      <el-col
        :span="8"
        justify="center"
        align="middle"
        v-for="item in infos"
        :key="item.title"
      >
        <div class="title serviceInfo">
          <el-link :underline="false">{{ item.title }} </el-link>
        </div>
        <!-- <div class="detail">{{ item.detail }}</div> -->
        <div class="detail">
          <p v-for="ditem in item.details" :key="ditem.dtitle">
            <el-link class="serviceInfo" type="info" :underline="false">{{
              ditem.dtitle
            }}</el-link>
          </p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      infos: [
        {
          title: "购物指南",
          details: [
            { dtitle: "购物流程", dpath: "/#" },
            { dtitle: "会员介绍", dpath: "/#" },
            { dtitle: "常见问题", dpath: "/#" },
            { dtitle: "联系客服", dpath: "/#" },
          ],
        },
        {
          title: "配送方式",
          details: [
            { dtitle: "上门自提", dpath: "/#" },
            { dtitle: "211限时达", dpath: "/#" },
            { dtitle: "配送服务费标准", dpath: "/#" },
            { dtitle: "海外配送", dpath: "/#" },
          ],
        },
        {
          title: "售后服务",
          details: [
            { dtitle: "售后政策", dpath: "/#" },
            { dtitle: "价格保护", dpath: "/#" },
            { dtitle: "退款说明", dpath: "/#" },
            { dtitle: "取消订单", dpath: "/#" },
          ],
        },
      ],
    };
  },
};
</script>

<style>
.bg {
  width: 99%;
  height: 170px;
}
.serviceInfo:hover {
  text-shadow: 2px 2px 5px #949494;
}
.title {
  transform: scale(1.1, 1.1);
}
.detail {
  transform: scale(0.9, 0.9);
}
</style>